<template>
  <div class="recruitment-activities" style="width: 100%;height: 100%">
    <h1 class="page-title">招聘活动安排和通知</h1>
    <el-table :data="activities" class="activity-table" border>
      <el-table-column prop="event_id" label="事件ID" width="100"></el-table-column>
      <el-table-column prop="title" label="活动名称" width="200"></el-table-column>
      <el-table-column prop="description" label="内容" width="300"></el-table-column>
      <el-table-column prop="event_date" label="日期" width="150"></el-table-column>
      <el-table-column prop="location" label="地点" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="signUp(scope.row)" type="primary">报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <sign-up-form v-if="showSignUpForm" :visible.sync="showSignUpForm" :activity="selectedActivity" @signup-success="handleSignUpSuccess"></sign-up-form>
  </div>
</template>

<script>
import { Table, TableColumn, Button, Message } from 'element-ui';
import axios from 'axios';
import SignUpForm from './SignUpForm.vue';

export default {
  name: 'RecruitmentActivities',
  components: {
    'el-table': Table,
    'el-table-column': TableColumn,
    'el-button': Button,
    'sign-up-form': SignUpForm
  },
  data() {
    return {
      activities: [],
      showSignUpForm: false,
      selectedActivity: null
    };
  },
  methods: {
    fetchActivities() {
      axios.get('http://localhost:8080/events/all')
          .then(response => {
            console.log('Full response:', response); // 添加日志，查看完整响应
            console.log('events response:', response.data); // 添加日志，查看响应数据
            if (response.data.code === "200") {
              const events = response.data.data;  // 确保提取的是数组
              console.log('Filtered activities:', events);
              this.activities = events; // 不再过滤，直接显示所有活动
            } else {
              console.error('Error response code:', response.data.code);
              Message.error('获取活动列表失败');
            }
          })
          .catch(error => {
            console.error('Error fetching activities:', error);
            Message.error('获取活动列表失败');
          });
    },
    signUp(activity) {
      this.selectedActivity = activity;
      this.showSignUpForm = true;
    },
    handleSignUpSuccess(message) {
      Message.success(message.message);
      this.showSignUpForm = false;
    }
  },
  created() {
    this.fetchActivities();
  }
}
</script>

<style>
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0; /* 移除 body 的默认 margin */
}

.recruitment-activities {
  padding: 0 20px; /* 移除顶部 padding */
  max-width: 100%; /* 设置最大宽度为 100% */
  margin: 0 auto; /* 移除 margin，居中对齐 */
}

.page-title {
  text-align: center;
  font-size: 24px;
  margin: 0; /* 移除标题的上下 margin */
  padding: 10px 0; /* 增加标题的上下 padding */
}

.activity-table {
  width: 100%;
  margin-top: 0; /* 移除表格与标题的间距 */
}

.el-table th, .el-table td {
  text-align: center;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.el-button {
  font-size: 14px;
}
</style>